<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<title>扫码支付管理</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/js/jq.js"></script>
<script type="text/javascript" src="/js/global.js"></script>
 <script type="text/javascript" src="/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap-switch.min.css" />
<link rel="stylesheet" href="/css/jquery.dataTables.min.css" />
<script type="text/javascript"  src="/js/jquery.dataTables.min.js"></script>
<style>
	.btn-editBaiMingDanItem{
		margin-right:20px;
	}
	.save{
	    padding: 15px;
	    text-align: right;
	    border-top: 1px solid #e5e5e5;
	}
	
	.btn-tijiao {
	    color: #fff;
	    background-color: #449d44;
	    border-color: #398439;
	}
	.btn-tijiao:hover{
		color: #fff;
	    background-color: #449d44;
	    border-color: #398439;
	}
 	.div-c-controlBtns {
		display:flex;
		justify-content:flex-end;
		margin-bottom:16px;
	}
		.modal-dialog {
		max-width: 1000px;
	}
	.div-c-controlBtns button + button {
		margin-left:8px;
	}
	.p-c-flexwrapper {
		display:flex;
		justify-content: center;
		align-items:center;
		margin-right:16px;
		margin-bottom:16px;
	}
	.p-c-flexwrapper > span {
		width:132px;
	}
	.p-c-flexwrapper > .form-control {
		width:150px;
	}
	#addAndEditModal .modal-body {
		display:flex;
		flex-wrap:wrap;
	}
	#addAndEditModal1 .modal-body {
		display:flex;
		flex-wrap:wrap;
	}
	.bootstrap-background {
	    color: #fff;
	    display: inline-block;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    border: 1px solid transparent;
	    padding: 5px 10px;
	    line-height: 1.5;
	    border-radius: 3px;
	    font-size: 12px;
	    cursor: default;	
	}
	.bootstrap-background.info {
		 background-color: #5bc0de;
   		 border-color: #46b8da;
	}
	.bootstrap-background.success {
		background-color: #5cb85c;
	    border-color: #4cae4c;
	}
	.bootstrap-background.all {
		background-color: rgb(65,139,202);
	    border-color: rgb(65,139,202);
	}	
	.img-c-smallPic {
		max-width:60px;
		max-height:60px;
		cursor: pointer;
	}		
	.pic-noticeText {
		display:none;
		margin: 0 16px;
	}
	.pic-noticeText.active {
		display:block;
	}
	.modal {
		overflow: auto!important;
	}
	#editor {
		width:100%;
	}
	.table>tbody>tr>td {
	vertical-align:middle;	
}
.dataTables_wrapper table td, .dataTables_wrapper table th {
	white-space: nowrap;
}
.dataTables_wrapper, .dataTables_wrapper table {
	overflow-x:auto;
	max-width:100%;
}
.dataTables_wrapper table {
	border-collapse: collapse!important;
}
table.dataTable thead th {
	border-bottom-color: #ddd!important;
}
*{margin: 0;padding: 0;font-size: 16px; }
.hidden-td {
	display:none;
}
.w-e-icon-upload2 {
	font-size:60px!important;
}
.hasmaxwidth-td {
  max-width:100px;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
  cursor: pointer;
  max-height:50px;
}
.butt-tijiao {
	color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    
     touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
table th,table tr,table td {
	text-align: center;
	vertical-align:middle;
}
</style>
		<script type="text/javascript" src="/js/wangEditor.min.js"></script>
</head>
<body>
	<div class="div-c-controlBtns" style="display:flex;justify-content:flex-start;">
		<button class="btn btn-primary" id="button-i-addNewZongDaiLi1">新增</button>
	</div>
	<p style="font-weight:bold;color:red;">建议活动图片尺寸大小：640X220,长期有效的活动请勿随意删除.</p>
<table id="table-i-cunkuanList" class="table table-striped table-bordered table-hover">
		<thead>
			<tr>
				<th style="display:none;"></th>
				<th>支付名称</th>
				<th>支付二维码</th>
				<th>状态</th>
				<th>创建人</th>
				<th>创建时间</th>
				<th>操作</th>
				<th style="display:none;"></th>
				<th style="display:none;"></th>
				<th style="display:none;"></th>
				<th style="display:none;"></th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog" style="width:1000px;">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close guanbi" data-dismiss="modal" aria-hidden="true">×</button>
		            </div>
		            <form  action="/admin/updateSweepCodePayment.do" enctype="multipart/form-data" method="post">
		            <input hidden="hidden"  id="input-i-content" />
			            <div class="modal-body">
			            	<input id="input-i-id" name="id" hidden="hidden" class="input-auto" />
			            	<p class="p-c-flexwrapper"><span>支付名称：</span><input name="name" id="input-i-name" required class="input-auto form-control" /></p>
			            	<p class="p-c-flexwrapper"><span>支付类型：</span>
			            		<select name="paymentType"  class='input-auto form-control zhifulx'>
			            			<option value="微信">微信</option>
			            			<option value="支付宝">支付宝</option>
			            		</select>
			            	</p>
			            </div>
			            <input onchange='PreviewImage(this)' name="file" id="input-i-filePic" type="file" style="margin-left:6px;" />
			            <p class="pic-noticeText" style="font-weight:bold;color:red;">注：在修改的情况下，如不选择新的图片，则默认保留原有的图片，如选择新的图片，则会替换原有的图片</p>
			            <img id="img-i-loadPic" src="" style="margin:10px auto; max-width:96%;max-height:500px;display:block;" />
		           		    <div style="display:none;" id="editor">
				    		</div>
		            	<p class="save"><input type="submit" class="btn btn-default btn-tijiao" value="提交"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></p>
		            </form>
		        </div>
		    </div>
		</div>
		<!-- /.modal -->
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true" style="z-index:9999;">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" >
           
            </div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   		
<div class="modal fade" id="tanchuangModal" tabindex="-1" role="dialog" aria-labelledby="tanchuangModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" >
            	<h2 class="tanchuang-edit-title">弹窗1内容编辑</h2>
 				<div id="editor2">
	    		</div>            	
            </div>
            <div class="modal-footer">	   
            	<button type="button" class="btn btn-success btn-saveAlertContent">保存</button>   
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   	
<!-- 模态框（Modal）删除， -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">你确定要删除该活动吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btn-i-delModalBtn">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
	
	
	
	<!-- 模态框（Modal）新增 -->
	
 	 	<div class="modal fade" id="addAndEditModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog" style="width:1000px;">
		      <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close guanbi" data-dismiss="modal" aria-hidden="true">×</button>
		            </div>
		            <form  action="/admin/addSweepCodePayment.do" enctype="multipart/form-data" method="post">
		         	  <input hidden="hidden"  id="input-i-content" /> 
			             <div class="modal-body">
			            	<input id="input-i-id" name="id" hidden="hidden" class="input-auto" />
			            	<input id="input-i-type" name="type" hidden="hidden" value='100' class="input-auto" />
			            	<p class="p-c-flexwrapper"><span>支付名称：</span><input name="name"  required class="input-auto form-control" /></p>
			            	<p class="p-c-flexwrapper"><span>支付类型：</span>
			            		<select name="paymentType"  class='input-auto form-control'>
			            			<option value="微信">微信</option>
			            			<option value="支付宝">支付宝</option>
			            		</select>
			            	</p>
			            </div> 
			           <input onchange='PreviewImage1(this)' name="file" id="input-i-filePic1" type="file" style="margin-left:6px;" /> 
			            <p class="pic-noticeText" style="font-weight:bold;color:red;">注：在修改的情况下，如不选择新的图片，则默认保留原有的图片，如选择新的图片，则会替换原有的图片</p>
			            <img id="img-i-loadPic1" src="" style="margin:10px auto; max-width:96%;max-height:500px;display:block;" />
		            	<p class="save"><input type="submit" class="btn btn-default btn-tijiao" value="提交"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></p>
		            </form> 
		            
		        </div> 
		    </div>
		</div> 
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script>

	initEditor("#editor")
	initEditor("#editor2")
	
	function PreviewImage(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)|(\.*.JPG$)|(\.*.PNG$)|(\.*.JPEG$)|(\.*.GIF$)|(\.*.BMP$)/;
		if (!pattern.test(imgFile.value)) {
			showNoticeModal("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("img-i-loadPic").innerHTML = "";
				document.getElementById("img-i-loadPic").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("img-i-loadPic").src = path
			}
		}
	}	
	
	
	 /* 添加新活动 */
	function PreviewImage1(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)|(\.*.JPG$)|(\.*.PNG$)|(\.*.JPEG$)|(\.*.GIF$)|(\.*.BMP$)/;
		if (!pattern.test(imgFile.value)) {
			showNoticeModal("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("img-i-loadPic1").innerHTML = "";
				document.getElementById("img-i-loadPic1").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("img-i-loadPic1").src = path
			}
		}
	}	
	//删除扫码支付接口
	bindDelItemEvent("#table-i-cunkuanList", ".btn-c-delactivity", "/admin/deleteSweepCodePayment.do")
	$("#table-i-cunkuanList").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      // "bInfo": true,
	      "bAutoWidth": false,
//		         "bServerSide":true,
	      'aLengthMenu':[5, 20],
	       "searching": false,
	       "dom": `ftp`,
//		    "searching": true,l
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "抱歉你没有添加过任何活动，添加一个试试吧",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },
	         "drawCallback": function( settings ) {
	        	 $(".input-c-mySwitch").bootstrapSwitch()
	         },
	         "ajax": {
	        	 "type": "POST",
	        	 "url": "/admin/findSweepCodePayment.do",
 	        	 "dataSrc": function(json) {
	        		 var newJson = json.data
	        		 $("div").data("newData",newJson)
	        		 for (var i = 0; i < newJson.length; i++) {
	         			var item = newJson[i]
	         			var timechuo=new Date(item.created_time);
						var time=timechuo.toLocaleDateString().replace(/\//g, "-") + " " + timechuo.toTimeString().substr(0, 8); 
						item.created_time=time
	         			 var stateValue = ""
	        			 if (item.state == "1") {
	        				 stateValue = "checked"
	        			 } else {
	        				 stateValue = ""
	        			 }
	         			item.typeValue = item.type
         				item.type = "<span class='bootstrap-background " + item.name + "'>" + item.type  + "</span>"
         				item.status = "<input class='input-c-mySwitch' data-size='small' type='checkbox' " + stateValue + " data-on-text='启用' data-on-color='success' data-off-color='danger' data-off-text='禁用' />"
	        		 	item.photoPath = "<a href='/d/cp/" + item.pictureAddress + "' target='_blank'><img src='/d/cp/" + item.pictureAddress + "' class='img-c-smallPic' /></a>"
	        		 }
	        		 return newJson
	        	 }, 
	         },
 	         "columns": [
						 {"data": "id", "className": "hidden-td id-edit-td"},
	                     {"data": "name", "className": "name-edit-td" },
	                     {"data": "photoPath", "className": "photoPath-edit-td" },
	                     {"data": "status",},
	                     {"data": "created_user", },
	                     {"data": "created_date", "className":"created_time-edit-td"},
	                     {"data": null, "defaultContent": "<button class='btn btn-warning btn-c-editZongDaiLiInfo btn-sm'  data-index1='1'>修改</button><button class='btn btn-danger btn-c-delactivity btn-sm' style='margin-left:16px;'>删除</button>"},
	                     {"data": "type", "className": "hidden-td type-edit-td"},
	                     {"data": "paymentType", "className": "hidden-td paymentType-edit-td"},
	                 ]
	   		 })	
	   		 
	   		 
	   	//对的 打开模态框
	   	$("#button-i-addNewZongDaiLi1").on("click", function(event) {
			$("#addAndEditModal2").attr("data-type1", "add")
			$("#addAndEditModal2").modal("show")
		})	
		$("#butt-chuangjianputonghdong").on("click",function(){
			$("#addAndEditModal1").modal("hide")
			$("#addAndEditModal2").modal("show")
			$("#input-i-name-jd-zsje-p")[0].style.display="flex";
			$("#input-i-name-jd-rgjk-p")[0].style.display="none";
			$("#input-i-name-jd-zxcz-p")[0].style.display="none"; 
			$("#input-i-type").val("2")
		})
		$("#button-i-addNewZongDaiLi").on("click", function(event) {
			$("#addAndEditModal").attr("data-type", "add")
			$("#addAndEditModal").modal("show")
		})	   		 
		bindJinYongQiYongSwitch("#table-i-cunkuanList", "updateSweepCodePaymentState.do", "state")
		
		$('#addAndEditModal').on('hidden.bs.modal', function () {
			if ($("#addAndEditModal").attr("data-type") == "edit") {
				$("#addAndEditModal form")[0].reset()
				$(".pic-noticeText").removeClass("active")
				$("#img-i-loadPic").attr("src", "")
			}
		})	
		var $ACTIVITY_TR
		var zhifulexing
		$("#table-i-cunkuanList").on("click", ".btn-c-editZongDaiLiInfo", function(event) {
			zhifulexing= $(this).parent().next().next().text();
			$("#addAndEditModal").attr("data-type", "edit")
			var $parentTr = $(event.target).closest("tr")
			 $("#addAndEditModal .input-auto").each(function(index, element) {
				$(element).val($parentTr.find("." + element.id.split("-")[2] + "-edit-td").text()) 
			}) 
			$("#img-i-loadPic").attr("src", $parentTr.find(".img-c-smallPic").attr("src"))
			$(".pic-noticeText").addClass("active")
			$("#addAndEditModal .w-e-text")[0].innerHTML = $parentTr.find(".details-edit-td").html()
			$("#addAndEditModal").attr("data-currentindex1", $(event.currentTarget).attr("data-index1"))
			$ACTIVITY_TR = $(event.currentTarget).closest("tr")
			$("#addAndEditModal .w-e-text").html($ACTIVITY_TR.find(".alertcontent-" + $(event.currentTarget).attr("data-index1")).html())
			var type=$(this).parent().next().next().next().text()
			$("#addAndEditModal").modal("show")
			var text = $("#input-i-name").val()
			var newData = $("div").data(newData)
			for(var i = 0;i < newData.newData.length;i++){
				 var item = newData.newData[i]
				$("#input-i-presendMoney").val($(this).parent().parent().find("td:eq(3)").text());
				
			}
		})
		var obj = {
			btnName: "#button-i-submitZongDaiLi",
			divName: "#addAndEditModal",
		}
		checkFormMethod(obj, function() {
			var type = $("#addAndEditModal").attr("data-type")
 			$("#addAndEditModal form").attr("action", ajaxObj[type])
			$("#addAndEditModal form")[0].submit()
		})		
		$("#addAndEditModal").on("shown.bs.modal", function(e) {
			if ($("#addAndEditModal").attr("data-type") === "add") {
				$("#addAndEditModal .w-e-text").html("")
			}
		})
	</script>
</body>
</html>